import { env, innerUrls } from '@/shared/constants';
import { Button, ButtonVariants } from '@/shared/ui';
import Image from 'next/image';

import PromoImgMobile from '../../images/promo2-image-mobile.png';
import PromoImg from '../../images/promo2-image.png';
import { PromoCard } from './PromoCard';
import cs from './PromoCard.module.scss';

export const Promo2 = () => (
  <PromoCard
    image={
      <>
        <div className={cs.desktop}>
          <Image alt="banner" src={PromoImg} />
        </div>
        <div className={cs.mobile}>
          <Image alt="banner" src={PromoImgMobile} />
        </div>
      </>
    }
  >
    <p className={cs.text}>
      Уже с 6 месяцев можно заменить бутылочку&nbsp;с&nbsp;соской&nbsp;на&nbsp;кружку! Узнайте как&nbsp;в&nbsp;нашем
      гайде «Отучение от&nbsp;бутылочки».
    </p>
    <Button
      className={cs.button}
      href={innerUrls.course(env.courses.bottle)}
      link
      target="_self"
      variant={ButtonVariants.Primary}
    >
      Подробнее
    </Button>
  </PromoCard>
);
